<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="bnbbs">
    <meta name="description" content="这是一个HTML5页面">
    <meta name="keywords" content="html5,css3,响应式">
    <meta name="generator" content="sublime text 3">
    <link rel="stylesheet" href="style.css">
    <!-- <meta http-equiv="refresh" content="5;http://www.baidu.com"> -->
    <meta http-equiv="content-type" content="text/html charset=utf-8">
    <title>Document</title>
</head>
<body>
    <p id="abc">段落</p>

    <p class="abc">段落</p>
    <p class="abc">段落</p>
    <p class="abc">段落</p>

    <input type="text" name="user" accesskey="n">

    <p contenteditable="true">可以修改吗？</p>

    <p dir="rtl">文字到右边了</p>

    <p hidden>文字到右边了</p>

    <p title="HTML5 教程">HTML5</p>

    <p lang="en">HTML5</p>

    <input type="text" name="user" tabindex="2">
    <input type="text" name="user" tabindex="1">

    <p style="color: red;">CSS样式</p>

    <p style="color: red;font-size: 50px;">这是一句话</p>

    <style type="text/css">
    p{
        color: blue;
        font-size: 40px;
    }
    </style>
    <p>这是另一句话</p>

    <b>这个元素隐含加粗样式</b>
    <span style="font-weight: bold;">这个元素通过style加粗</span>

    <p style="color: brown;font-size: 30px;">我将被三种方式叠加样式</p>

    <style type="text/css">
    p{
        color: yellowgreen ;
        font-weight: bold;
    }
    </style>

    <p style="color: violet;">这是<b>HTML5</b></p>

    <p>这是<b>HTML5</b></p>
    <style type="text/css">
    p{
        border: 1px solid teal;
    }
    b{
        border: inherit;
    }
    </style>

    <style type="text/css">
    *{
        border: 1px solid palevioletred;
    }
    </style>
    <p>段落</p>
    <b>加粗</b>
    <span>wusaddas</span>

    <style type="text/css">
    p{
        color: honeydew;
    }
    </style>
    <p>asdjsakdkds</p>

    <style type="text/css">
    #abc{
        font-size: 20px;
    }
    </style>
    <p id="abc">技术附件参数副科级奥斯卡</p>

    <style type="text/css">
    .abc{
        border: 1px solid seagreen;
    }
    </style>
    <b class="abc">加粗今年将积极不急不急</b>
    <span class="abc">无学生卡查看撒充分肯定是</span>

    <style type="text/css">
    b.abc{
        border: 1px solid darkorange;
    }
    </style>
    <span class="abc edf">五金车间的开发环境奥斯卡</span>

    <style type="text/css">
    [href]{
        color: orange;
    }
    </style>

    <style type="text/css">
    
    [type="password"]{
        border: 1px solid rebeccapurple;
    }
    </style>

    <style type="text/css">
    [href^="http"]{
        color: olivedrab;
    }
    </style>

    <style type="text/css">
    [href$=".com"]{
        color: lawngreen ;
    }
    </style>
    <style type="text/css">
    [href*="baidu"]{
        color: orchid;
    }
    </style>
    <style type="text/css">
    [class~="edf"]{
        font-size: 50px;
    }
    </style>
    <style type="text/css">
    [lang|="en"]{
        color: palegoldenrod;
    }
    </style>

    <style type="text/css">
    p,b,i,span{
        color: gold;
    }
    </style>
    <style type="text/css">
    p b{
        color: grey;
    }
    </style>
    <style type="text/css">
    ul>li{
        border: 1px solid darkred;
    }
    </style>
    <ul>
        <li>儿子
            <ol>
                <li>孙子</li>
                <li>孙子</li>
            </ol>
        </li>
        <li>儿子</li>
        <li>儿子</li>
    </ul>
    <style type="text/css">
    p+b{
        color: darkseagreen;
    }
    </style>
    <style type="text/css">
    p~b{
        color: darkslategrey;
    }
    </style>
    <style type="text/css">
    ::first-line{
        color: fuchsia;
    }
    </style>
    <style type="text/css">
    ::first-letter{
        color: goldenrod;
    }
    </style>
    <style type="text/css">
    a::before{
        content: '点击-';
    }
    </style>
    <style type="text/css">
    a::after{
        content: '---请进';
    }
    </style>
</body>
</html>